<template>
	<view>
		<search-slot>
			<template #center>
				<view class="search-search">购物车</view>
			</template>
			<template #right>
				<view class="search-saoma text-center" @click="changeEdit">
					<text class="search-size" v-if="isShow">编辑</text>
					<text class="search-size" v-else>完成</text>
				</view>
			</template>
		</search-slot>
		<template v-if="isListShow">
			<view class="py-5 d-flex a-center j-center bg-white">
				<view class="iconfont icon-gouwuche text-light-muted" style="font-size: 50rpx;"></view>
				<text class="text-light-muted mx-2">购物车还是为空</text>
				<view class="px-2 py-1 border border-light-secondary rounded" hover-class="bg-light-secondary">
					去逛逛
				</view>
			</view>
		</template>
		<template v-else>
			<view class="d-flex a-center py-3 border-bottom border-light-secondary" v-for="(item,index) in list"
				:key="index">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 80rpx;height: 80rpx;"
					@click="selectItem(index)">
					<radio color="#FD6801" :checked="item.checked" />
				</label>
				<image :src="item.cover" mode="widthFix" style="height: 150rpx;width: 150rpx;"
					class="border border-light-secondary rounded p-2 flex-shrink">
				</image>
				<view class="flex-1 d-flex flex-column pl-2">
					<view class="text-dark" style="font-size: 35rpx;">
						{{item.title}}
					</view>
					<view class="d-flex text-light-muted mb-1">
						<text class="my-1">
							{{item.skusText}}
						</text>
					</view>
					<view class="mt-auto d-flex j-sb">
						<text slot="newprice" style="color: #f60;">￥{{item.pprice}}</text>
						<view class="a-self-end">
							<uni-number-box :min="item.minnum" :max="item.maxnum" v-model="item.num"></uni-number-box>
						</view>
					</view>
				</view>

			</view>
			<view class="py-5"></view>
			<template v-if="isShow">
				<view
					class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
					style="height: 100rpx;z-index: 100;">
					<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;"
						@click="doSelectAll">
						<radio color="#FD6801" :checked="checkedAll"></radio>
					</label>
					<view class="flex-1 d-flex a-center j-center font-md" style="background:#fff;">
						合计:
						<text slot="newprice" style="color: #f60;font-weight: 900;">{{totalPrice}}</text>
					</view>
					<view class="flex-1 d-flex a-center j-center main-bg-color text-white font-md"
						hover-class="main-bg-hover-color">
						结算
					</view>
				</view>
			</template>
			<template v-else>
				<view
					class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
					style="height: 100rpx;z-index: 100;">
					<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;"
						@click="doSelectAll">
						<radio color="#FD6801" :checked="checkedAll"></radio>
					</label>
					<view class="flex-1 d-flex a-center j-center font-md main-bg-color text-white">
						移入收藏
					</view>
					<view class="flex-1 d-flex a-center j-center bg-danger text-white font-md"
						hover-class="main-bg-hover-color" @click="delGoods">
						删除
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				isListShow: false,
				isShow: true
			}
		},
		methods: {
			...mapMutations(['selectItem', 'delGoods']),
			...mapActions(['doSelectAll']),
			changeEdit() {
				this.isShow = !this.isShow
			}
		},
		computed: {
			...mapState({
				list: state => state.cart.list
			}),
			...mapGetters(['checkedAll', 'totalPrice'])
		}
	}
</script>

<style scoped>
	.search-xiaoxi,
	.search-saoma {
		width: 100rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		position: absolute;
		right: 10rpx;
	}

	.search-size {
		font-size: 28rpx;
	}

	.search-search {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		/* background-color: #f4f4f4; */
		font-size: 28rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>